<template>
  <div style="padding: 30px">
    <div class="home">HO<span>ME</span></div>
    <button @click="add">Add</button>
    {{ count }}
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
    <a-button type="primary" @click="index">首页</a-button>

    <hr />

    <ct-copy content="996"></ct-copy>

    <hr />

    <ct-button text="Open Modal" @click="showModal" type="primary"></ct-button>

    <ct-dialog ref="ctDialogRef" title="tit123">
      <slot>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </slot>
    </ct-dialog>

    <hr />

    <ct-button text="提交" type="primary"></ct-button>

    <hr />

    <ctTree checkable show-line show-icon :tree-data="treeData">
      <template #title="{ title }">
        {{ title }}
      </template>

      <template #icon>
        <smile-outlined />
      </template>
    </ctTree>

    <hr />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { GetVeriCodeImg } from "@/api/common";
import type { TreeProps } from "ant-design-vue";
import { SmileOutlined } from "@ant-design/icons-vue";
const treeData: TreeProps["treeData"] = [
  {
    title: "parent 1",
    key: "0-0",
    children: [
      {
        title: "parent 1-0",
        key: "0-0-0",
        disabled: true,
        children: [
          { title: "leaf", key: "0-0-0-0", disableCheckbox: true },
          { title: "leaf", key: "0-0-0-1" },
        ],
      },
      {
        title: "parent 1-1",
        key: "0-0-1",
        children: [{ key: "0-0-1-0", title: "sss" }],
      },
    ],
  },
];

import _ from "lodash";
// 导入store
import { useMain } from "@/store/store";
const mainStore = useMain();

import { storeToRefs } from "pinia";
const { count } = storeToRefs(useMain());

import { router } from "@/router";

const list = ref([1, 2, 3]);

import ctCopy from "@/components/ctCopy.vue";
import ctDialog from "@/components/ctDialog.vue";
import ctButton from "@/components/ctButton.vue";
import ctTree from "@/components/ctTree.vue";

const ctDialogRef = ref();
const showModal = () => {
  ctDialogRef.value.openDialog();
};

/**
 * 获得验证码
 */
const veriCodeImgSvg = ref();
const getVeriCodeImg = async () => {
  await GetVeriCodeImg().then((res) => {
    veriCodeImgSvg.value = res;
  });
};
getVeriCodeImg();

/**
 * 测试lodash
 */
console.log(_.chunk(["a", "b", "c", "d"], 3));

/**
 * add
 */
const add = () => {
  mainStore.count++;
};

/**
 * 跳转首页
 */
const index = () => {
  router.push({
    path: "/admin/index",
  });
};
</script>

<style lang="scss" scoped>
.home {
  color: red;

  span {
    color: blueviolet;
    font-weight: bold;
  }
}
</style>
